<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
	// import  {fontUtil } from 'uview-plus';
	// fontUtil.loadFont();
	onLoad((options: any)=>{
		console.log("param-pId:" + options.pId)
	})	
	const pInfo = ref({
		url:'https://uview-plus.jiangruyi.com/album/2.jpg',
		stageName: '萌芽',
		statusName: '健康'
	});
	const treeData = reactive([
		{label:'浇水'},
		{label:'施肥'},
		{label:'测试'}
	])
	const activeIndex = ref(0)
	const watering = reactive({
		quantity: 100,
		model: '喷洒',
		add:'柠檬水'
	})
	function onSelectTabHandler(index:number){
		console.log('节点被点击:', index);
		activeIndex.value = index
	}
	function onWaterQuantityChangeHandler(e){
		 console.log('change', e);
	}
</script>

<template>
	<view class="container">
			<!-- <up-navbar
				title="个人中心"
				@rightClick="rightClick"
				:autoBack="true"
			>
			</up-navbar> -->
			<!-- <view class="custom-back-button"></view> -->
			<view class="plantInfo">
				<up-image :show-loading="true" :src="pInfo.url" width="80px" height="80px" ></up-image>
				<view style="display: flex; flex-direction: column; justify-content: center; margin-left: 20rpx;">
					<view>阶段：{{pInfo.stageName}}</view>
					<view>状态：{{pInfo.statusName}}</view>
				</view>
			</view>
			<view class="tab-contain">
				<scroll-view class="tab-menu" scroll-y="true">
					<view class="tab-item" v-for="(item, index) in treeData" :key="index" @click="onSelectTabHandler(index)">
						{{item.label}}
					</view>
				</scroll-view>
				<scroll-view class="tab-content" scroll-y>
					<view v-if="activeIndex===0">
						<view class="tab-content-item">
							<up-input style="border: 1rpx solid #8f8f8f"
							    placeholder="请输入内容"
								border="bottom"
								clearable
							    v-model="watering.quantity"
							    @change="onWaterQuantityChangeHandler"
							  ></up-input>
						</view>
						<view class="tab-content-item">
							<span>浇水方式</span><span>{{watering.model}}<uni-icons type="right" size="24" color="#8f8f8f"></uni-icons></span>
						</view>
						<view class="tab-content-item">
							<span>添加物</span><span>{{watering.add}}<uni-icons type="right" size="24" color="#8f8f8f"></uni-icons></span>
						</view>
						<view class="tab-content-item">
							<span>提醒日期</span><span><uni-icons type="right" size="24" color="#8f8f8f"></uni-icons></span>
						</view>
						
						<up-button type="primary" :plain="true" :hairline="true" text="生成笔记" style="margin: 40rpx 10rpx 0 0;"></up-button>
						<view>
							<up-checkbox-group>
								<up-checkbox
									:customStyle="{marginBottom: '8px'}"
									label="附加生长记录"
									name="growRecord"
									checked
								></up-checkbox>
							</up-checkbox-group>
						</view>
					</view>
					<view v-if="activeIndex===1">施肥</view>
					<view v-if="activeIndex===2">测试</view>
				</scroll-view>
			</view>
		</view>
		 <up-input
		    placeholder="请输入内容"
		    border="surround"
		    clearable
		  ></up-input>
</template>

<style>
.plantInfo{
	margin: 10rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
}
.tab-contain{
	display: flex;
	background-color: #ffffff;
	margin: 10rpx;
}
.tab-menu{
	width: 100rpx; /* 根据需要调整宽度 */
	height: 100%; /* 或具体高度 */
	background-color: #f8f8f8;
}
.tab-content{
	flex: 1; /* 占据剩余空间 */
	height: 100%; /* 或具体高度 */
	background-color: #f8f8f8;
}
.tab-item {
  padding: 10rpx; /* 根据需要调整内边距 */
}
.tab-content-item{
	margin: 10rpx;
	height: 80rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
